<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text"><button onclick="addfun()">发送</button><button onclick="setstorage()">暂存</button>
    <ul>
    </ul>
    <script>
        // 初始化获取缓存中的值 转化成json对象
        let nn = localStorage.getItem('list')
        console.log(nn);
        console.log(typeof nn);
        // 将json字符串转换成json对象
        let list = JSON.parse(nn)||[]
        
        
        
        // let list = JSON.parse(localStorage.getItem('list'))||[]
        console.log(list);
        
        setdom()
        
        // 发送数据
        function addfun() {
            let value = document.querySelector('input').value
            let date = new Date().getTime()
            // 在对象中如果属性名和属性值一样可以省略属性值
            let obj = {
                text:value,
                date
            }
           list.push(obj)    
           setdom()
        }
        function setdom(params) {
            let lis = ''
            list.forEach(item=>{
                lis+=`<li>${item.text}--${item.date}</li>`
            })
            document.querySelector('ul').innerHTML = lis
        }
        function setstorage(){
            // 通过转换成json字符串的形式进行存储
            localStorage.setItem('list',JSON.stringify(list))
        }
    </script>
</body>
</html>